import VueRouter from "vue-router"
import HeBei from '../pages/HeBei'
import HeNan from '../pages/HeNan'
import City from '../pages/City'

const router = new VueRouter({
    routes: [
        {
            name: 'bei',
            path: '/hebei',
            component: HeBei,
            meta: { title: '河北省' },
            children: [
                {
                    name: 'shi',
                    path: 'sjz/:a1/:a2/:a3',
                    component: City,
                    props: true,
                    // 带有这个属性的，并且值是true，表示该路由是需要鉴权的。
                    meta: {
                        isAuth: true,
                        title: '石家庄'
                    },
                },
                {
                    name: 'han',
                    path: 'hd/:a1/:a2/:a3',
                    component: City,
                    props: true,
                    meta: {
                        isAuth: true,
                        title: '邯郸'
                    }
                },
            ]
        },
        {
            name: 'nan',
            path: '/henan',
            component: HeNan,
            meta: { title: '河南省' },
        }
    ]
})

// 全局后置路由守卫
// 1.代码写到哪里？在创建router对象之后，暴露router对象之前。
// 2.afterEach中的回调函数什么时候执行？初始化的时候执行一次，以后每一次切换完任意一个路由组件之后被调用。
// 3.这个回调函数有两个参数：to, from。
// 4.这个回调函数没有next参数。因为没有必要了。
router.afterEach((to, from) => {
    document.title = to.meta.title || '欢迎使用本系统'
})

export default router